<template>
	<view class="content">
		<!--
		    author: 李文昊
		    content-color: 左边的div颜色，通过数组控制后面通过其它方式改变
			content-hr:导航栏外包裹
			@B="B" @A="A" @C="C": 把这个组件的方法A/B/C传给子组件让子组件也能使用
			numberOfRows:每行个数
			navList:这一个分组的项
		-->
		<view class="subhead-content">
			<view class="content-color" :style="{'background-color':color}">
			</view>
			<view class="content-hr">
				<home-switch-item ref="item" @B="B" @A="A" @C="C" :itemColor="itemColor" :bottomNavList="bottomNavList">
				</home-switch-item>
			</view>
		</view>
		<home-middle-navigation :numberOfRows="4" :navList="navList" minHeight="260rpx"></home-middle-navigation>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrderList,
		syncGetGoodsList,
		syncPaidServiceList,
	} from "../../util/network.js"
	export default {
		data() {
			return {
				bottomNavList: [{
						id: 0,
						name: "收费服务",
						href: "",
						method: 'A',
						pendingFlag: false
					},
					{
						id: 1,
						name: "物品借用",
						href: "",
						method: 'B',
						pendingFlag: false
					},
					{
						id: 2,
						name: "服务记录",
						href: "",
						method: 'C',
						pendingFlag: false
					}
				],
				itemColor: ['red', '', ''],
				navList: [],
				temp:"",
				pendingFlag:false,
			};
		},
		props: {
			color: String
		},
		methods: {
			A: function() {
				this.cnt = 0,
				this.navList = [],
				this.itemColor = ['red', '', ''],
				this.temp = syncPaidServiceList(1, 16)
				this.temp.then((res)=>{
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.paidServiceList.length; i++) {
							var tempSingleGood = {
								'id':0,
								'name':"",
								'type':0,
								'goodsId':0,
								'href':"/pages/chargedServiceApplication/details/details?id=0&state=待申请&serviceId=",
								'imgurl': require('@/static/invoice1.png'),
							}
							tempSingleGood.href =tempSingleGood.href + res.data.data.paidServiceList[i].id
							console.log(tempSingleGood.href)
							tempSingleGood.id = i
							tempSingleGood.type = 0
							tempSingleGood.name = res.data.data.paidServiceList[i].title
							tempSingleGood.goodsId = res.data.data.paidServiceList[i].id
							if(res.data.data.paidServiceList[i].status == 0){
								this.navList.push(tempSingleGood)
							}
						}
					}else {
						// this.isLoadMore = false
					}
				})
			},
			B: function() {
				this.cnt = 0,
				this.navList = [],
				this.itemColor = ['', 'red', ''],
				this.temp = syncGetGoodsList("goods/list", 0, 1, 16, "深圳市")
				this.temp.then((res)=>{
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.goodsList.length; i++) {
							var tempSingleGood = {
								'id':0,
								'name':"",
								'type':1,
								'goodsId':0,
								'href':"/pages/rentItemsApplication/details/details?id=0&state=待申请&goodsId=",
								'imgurl': require('@/static/invoice1.png'),
							}
							tempSingleGood.href =tempSingleGood.href + res.data.data.goodsList[i].id
							console.log(tempSingleGood.href)
							tempSingleGood.id = i
							tempSingleGood.type = 1
							tempSingleGood.name = res.data.data.goodsList[i].name
							tempSingleGood.goodsId = res.data.data.goodsList[i].id
							if(res.data.data.goodsList[i].status == 0){
								this.navList.push(tempSingleGood)
							}
						}
					}else {
						// this.isLoadMore = false
					}
				})
			},
			C: function() {
				this.itemColor = ['', '', 'red'],
					this.navList = [{
							id: 0,
							name: "收费服务记录",
							href: "/pages/chargedServiceApplication/history/history",
							imgurl: require('@/static/contract1.png'),
							pendingNum:this.$pendingObj.pendingObj.costService
						},
						{
							id: 1,
							name: "物品借用服务记录",
							href: "/pages/rentItemsApplication/history/history",
							imgurl: require('@/static/invoice1.png'),
							pendingNum:this.$pendingObj.pendingObj.goodsBorrow
						}
					]
			},
			reFresh(){
				this.A()
			},
			reFreshPendingNum(){
				if(this.$pendingObj.pendingObj.goodsBorrow > 0 || this.$pendingObj.pendingObj.costService > 0){
					this.pendingFlag = true
				}else{
					this.pendingFlag = false
				}
				this.bottomNavList = [{
						id: 0,
						name: "收费服务",
						href: "",
						method: 'A',
						pendingFlag: false
					},
					{
						id: 1,
						name: "物品借用",
						href: "",
						method: 'B',
						pendingFlag: false
					},
					{
						id: 2,
						name: "服务记录",
						href: "",
						method: 'C',
						pendingFlag: this.pendingFlag
					}
				]
				if(this.itemColor[2] == 'red'){
					this.C()
				}
			}
		},
	}
</script>
<style>
	.subhead-content {
		width: 100%;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.content-color {
		background-color: red;
		width: 12rpx;
		height: 87rpx;
		float: left;
		margin-top: 4rpx;
	}

	.content-hr {
		margin-left: 12rpx;
		height: 89rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		overflow: hidden;
	}
</style>
